<template>
    <el-card shadow="never">
      <!-- 搜索 -->
      <el-form :model="searchForm" class="mb-3" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键词">
              <el-input
                v-model="searchForm.keyword"
                placeholder="管理员昵称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-button type="primary" @click="getData">搜索</el-button>
            <el-button @click="resetSearchForm">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
  
      <!-- 新增刷新 -->
      <ListHeader @create="handleCreate" @refresh="getData"></ListHeader>
  
      <!-- 表格 -->
  
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        
        <el-table-column prop="title" label="標題" />
   
     
   
        <el-table-column prop="created_at" label="创建时间" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="small" text type="primary" @click="handleEdit(row)">修改</el-button>
  
            <el-popconfirm
              title="是否要删除?"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(row.id)"
            >
              <template #reference>
                <el-button class="!m-0" text type="primary" size="small"
                  >删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        class="flex justify-center mt-4"
        @current-change="getData"
        :current-page="curpage"
        :page-size="limit"
      />
  
      <!-- 提交表单 -->
      <FormDrawer ref="formDrawerRef" @submit="handleSubmit" :title="drawerTitle">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
          <el-form-item label="標題" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="內容" prop="content">
            <el-input v-model="form.content" rows="5" type="textarea" />
          </el-form-item>
       
  
          <!-- <el-form-item label="角色">
            <el-select v-model="form.role_id" placeholder="选择角色">
              <el-option
                v-for="item in role"
                :key="item.id"
                :label="item.role_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
        </el-form>
      </FormDrawer>
    </el-card>
  </template>
  
  <script setup>
  import { ref } from "vue";
  

  import {
    getNotice,
    createNotice,
    updateNotice,
    deleteNotice,
  } from "~/api/notice.js";
  import FormDrawer from "~/components/FormDrawer.vue";
  import ListHeader from "~/components/ListHeader.vue";
  
  import { useInitTable, useInitForm } from "~/composables/useCommon.js";
  
  const role = ref(null);
  
  const {
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    curpage,
    total,
    limit,
    getData,
    handleDelete,
    handleStatusChange,
  } = useInitTable({
    searchForm: {
      keyword: "",
    },
    
    getList: getNotice,
    delete: deleteNotice,
    //   onGetListSuccess: (res) => {
  
    //     (total.value = res.data.total), (tableData.value = res.data.data);
    //   },
  });
  
  //表单
  
  const {
    formDrawerRef,
    formRef,
    form,
    rules,
    drawerTitle,
    handleSubmit,
    handleCreate,
    handleEdit,
  } = useInitForm({
    form: {
      title: "",
      content: "",
    },
    rules: {
      username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
    },
    getData,
    update: updateNotice,
    create: createNotice,
  });
  </script>
  